<!--
 * @Author: zhangxiangsheng 1026583651@qq.com
 * @Date: 2024-06-17 14:47:55
 * @LastEditors: zhangxiangsheng 1026583651@qq.com
 * @LastEditTime: 2024-06-26 13:55:44
 * @FilePath: \appGly\pages\index\index.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
	<view class="content">
		<u-navbar title="">
			<template #left>
				<view></view>
			</template>
		</u-navbar>
		<view class="ztjcard1 u-flex">
			<view class="item">
				<view class="text1">{{$z.$t("站点充电总收入(元)")}}</view>
				<view class="text2">{{ StatFrZje.jez / 100 || 0 }}</view>
			</view>
			<view class="item">
				<view class="text1">{{$z.$t("累计参考电量")}}</view>
				<view class="text2">{{ parseInt(Situation.zdl / 10000) || 0 }}</view>
			</view>
		</view>
		<view class="ztjcard2 u-flex">
			<view class="item" @click="$z.gopage(`/pages/index2/wdcdz/wdcdz`)">
				<view class="iconfont iconicon-chongdianzhuang"></view>
				<view class="text1">{{ StatRegion.slsb }}</view>
				<view class="text2">{{$z.$t("我的总设备")}}</view>
			</view>
			<view class="item" @click="$z.gopage(`/pages/Station/Station`)">
				<view class="iconfont iconquyu"></view>
				<view class="text1">{{ StatRegion.slqu }}</view>
				<view class="text2">{{$z.$t("我的站点(个)")}}</view>
			</view>
			<view class="item" @click="$z.gopage(`/pages/Cards/Cards`)">
				<view class="iconfont iconqia"></view>
				<view class="text1">{{ StatRegion.slcard }}</view>
				<view class="text2">{{$z.$t("总卡片数(个)")}}</view>
			</view>
		</view>
		<ztabbar></ztabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {},
				StatFrZje: {},
				Situation: {},
				StatRegion: {},
			};
		},
		created() {
			this.init();
		},
		methods: {
			async init() {
				let user = await this.$store.dispatch("user/getuser");
				this.user = user;
				let StatFrZje = await this.$z.request("/StatFrZje", {
					frid: user.frid,
				});
				this.StatFrZje = StatFrZje[0];
				let Situation = await this.$z.request("/Situation");
				this.Situation = Situation[0];
				let StatRegion = await this.$z.request("/StatRegion");
				this.StatRegion = StatRegion[0];
			},
		},
	};
</script>

<style>
	page {
		background: #efeff4;
	}
</style>
<style lang="scss" scoped>
	.ztjcard1 {
		background: #fff;
		margin: 20rpx;
		border-radius: 8rpx;

		.item {
			width: 0;
			flex: 1;
			padding: 20rpx 30rpx;
			position: relative;

			&:nth-child(1) {
				&::after {
					content: "";
					right: 0;
					top: 40rpx;
					bottom: 40rpx;
					width: 2rpx;
					position: absolute;
					background: #dcdcdc;
				}
			}

			.text1 {
				color: #969696;
				font-size: 32rpx;
				line-height: 60rpx;
			}

			.text2 {
				line-height: 40px;
				color: #2093f5;
				font-size: 30px;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
				height: 40px;
			}
		}
	}

	.ztjcard2 {
		background: #fff;
		margin: 20rpx;
		border-radius: 8rpx;
		display: flex;
		flex-wrap: wrap;

		.item {
			width: 50%;
			padding: 20rpx 30rpx;
			position: relative;

			&:nth-child(1) {
				&::after {
					position: absolute;
					bottom: 0;
					right: 0;
					left: 15px;
					height: 1px;
					content: "";
					transform: scaleY(0.5);
					background: #dcdcdc;
				}
			}

			&:nth-child(2) {
				&::after {
					position: absolute;
					bottom: 0;
					left: 0;
					right: 15px;
					height: 1px;
					content: "";
					transform: scaleY(0.5);
					background: #dcdcdc;
				}
			}

			.iconfont {
				line-height: 30px;
				font-size: 26px;
				color: #2093f5;
				display: block;
			}

			.text1 {
				display: block;
				color: #333333;
				line-height: 40px;
				font-size: 26px;
				height: 40px;
				text-overflow: ellipsis;
				overflow: hidden;
			}

			.text2 {
				font-size: 14px;
				line-height: 18px;
				color: #969696;
			}
		}
	}
</style>